import React from 'react';
import { Modal, Form, Row } from 'antd';

const DetailModal = props => {
  const {
    visible,
    handleCancel,
    handleOk,
    formItemLayout,
    serviceLabel,
    modifyObj,
    csLabel,
    customerLabel,
    ruleTip,
  } = props;
  return (
    <Modal
      title="规则详情"
      visible={visible}
      onOk={handleOk}
      onCancel={handleCancel}
      forceRender
      destroyOnClose
    >
      <Form preserve="false" layout="horizontal" {...formItemLayout}>
        <Row>
          <Form.Item label={<span>{serviceLabel}</span>}>{modifyObj.tskName}</Form.Item>
        </Row>
        <Row>
          <Form.Item label={<span>{csLabel}</span>}>
            {modifyObj.creIdListName ? modifyObj.creIdListName.join(',') : ''}
          </Form.Item>
        </Row>
        <Row>
          <Form.Item label={<span>{customerLabel}</span>}>
            {modifyObj.custIdListName ? modifyObj.custIdListName.join(',') : ''}
          </Form.Item>
        </Row>
        <p style={{ fontSize: 14, color: '#ccc' }}>{ruleTip}</p>
      </Form>
    </Modal>
  );
};

export default DetailModal;
